/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Dimensions,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import TextView from './TextView.js';

let sWidth = Dimensions.get('window').width;
let sHeight = Dimensions.get('window').height;
let catalogueWidth = (sWidth-20)/3;
let cellHeight = 45;

let leftMonthData = ['日期','订单数','订单设备数','成功订单数','关注订单数','新增用户数','PORTAL_PV',
                  '微信PV','微信UV','吸粉数','PV/UV','微信拉起率','吸粉率','页面打开率'];
let leftMonthKeys = ["date","orderFormNum", "orderFormDevNum", "oderFormSuccNum","oderFormFocusedNum","newAddUserNum", "portalPV",
                    "wePV", "weUV","fetchFansNum", "PVUVDevide", "weUpRate",  "fetchFansRate", "pageOpenRate"];
let leftDayData = ['医院','医院编码','订单数','订单设备数','成功订单数','关注订单数','新增用户数',
                    'PORTAL_PV','微信PV','微信UV','吸粉数','PV/UV','微信拉起率','吸粉率','页面打开率'];
let leftDayKeys = ["hospitalName","hospitalCode","orderFormNum", "orderFormDevNum", "oderFormSuccNum","oderFormFocusedNum",
                    "newAddUserNum", "portalPV", "wePV", "weUV","fetchFansNum", "PVUVDevide", "weUpRate",  "fetchFansRate", "pageOpenRate"];


export default class ReportSingleDetail extends Component {
  static navigationOptions = ({navigation}) => ({
    headerLeft: (
      <TouchableOpacity
        onPress = {() => navigation.goBack()}
      >
        <TextView
          text = '返回'
          textStyle = {{fontSize:16, color:'#BD10E0'}}
          style = {{
            width:40,
            height:20,
            marginLeft:10,
            justifyContent:'center',
          }}
        />
      </TouchableOpacity>
    ),
    headerTitle:navigation.state.params.isDayReport?'日报详情':'月报详情',
    headerTintColor:'#BD10E0',
    headerStyle:{backgroundColor:'#ffffff',},
    headerTitleStyle:{
      marginRight:72,
      alignSelf: 'center',
    }
  })

  _setUpContentView = () => {
    var itemArr = [];
    var leftData = this.props.navigation.state.params.isDayReport ? leftDayData : leftMonthData;
    var keysArr = this.props.navigation.state.params.isDayReport ? leftDayKeys : leftMonthKeys;
    var rightData = this.props.navigation.state.params.arg;

    for (let i = 0; i < leftData.length; i++) {
      itemArr.push(
        <View
          style = {{height:cellHeight, width:catalogueWidth*3}}
          key = {i}
        >
          {/* 上部分割线 */}
          <View style = {{backgroundColor:'black', height:i===0?1:0, width:catalogueWidth*3,}}></View>
          {/* 中间的内容部分 */}
          <View style = {{height:43, width:catalogueWidth*3, flexDirection:'row'}}>
            {/* 左线 */}
            <View style = {styles.verLineStyle}></View>

            <TextView
              text = {i===0?'':leftData[i]}
              textStyle = {{fontSize:12}}
              style = {styles.catalogueStyle}
            />

            {/* 中线 */}
            <View style = {styles.verLineStyle}></View>

            <TextView
              text = {rightData[keysArr[i]]}
              textStyle = {{fontSize:12}}
              style = {styles.innerDataStyle}
            />


            {/* 右线 */}
            <View style = {styles.verLineStyle}></View>
          </View>

          {/* 底部分割线 */}
          <View style = {styles.honLineStyle}></View>

        </View>
      )
    }
    return itemArr;
  }

  render() {
    return (

      <View style={styles.container}>
        <ScrollView
          style = {styles.outerScrollviewStyle}
          showsVerticalScrollIndicator = {false}
        >
          {this._setUpContentView()}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: sWidth,
    height: sHeight-64,
    backgroundColor:'#ffffff',
  },
  outerScrollviewStyle: {
    marginHorizontal: 10,
    marginTop: 15,
    marginBottom: 25,
    backgroundColor:'#ffffff',
  },
  catalogueStyle: {
    width:catalogueWidth,
    height:cellHeight,
    alignItems:'center',
    justifyContent:'center',
  },
  verLineStyle: {
    backgroundColor:'black',
    width:1,
    height:44,
  },
  innerDataStyle: {
    width:catalogueWidth*2-3,
    height:cellHeight,
    justifyContent:'center',
    alignItems:'center',
  },
  honLineStyle: {
    backgroundColor:'black',
    height:1,
    width:catalogueWidth*3,
  }
});
